import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '../layout/index.vue'
import { ElMessage } from "element-plus";

const userInfoStore = localStorage.getItem("userInfo")
// let userInfo = null
// if (userInfoStore) {
//     userInfo = JSON.parse(userInfoStore)
// }

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            component: Layout,
            redirect: '/treasure',
            meta: {
                title: '首页'
            },
            children: [
                {
                    path: '/treasure',
                    component: () => import('@/views/TreasureView.vue'),
                    meta: { title: "菁菁民宿" }
                },
                {
                    path: '/profile',
                    name: 'profile',
                    component: () => import('@/views/Profile.vue'),
                    children: [
                        {
                            path: 'userInfo',
                            name: 'userInfo',
                            component: () => import('@/views/profile/UserInfo.vue')
                        },
                        {
                            path: 'settings',
                            name: 'settings',
                            component: () => import('@/views/profile/Settings.vue')
                        },
                        {
                            path: 'myReserve',
                            name: 'myReserve',
                            component: () => import('@/views/profile/MyReserve.vue')
                        }
                    ]
                },

                {
                    path: '/house/:id',
                    name: 'House',
                    component: () => import('@/views/House.vue'),
                    hidden: true
                },
            ]
        },
        {
            path: '/login',
            component: () => import('@/views/Login.vue'),
            meta: { title: "欢迎登录菁菁民宿" }
        },
        // {
        //     path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('../pages/404.vue'), meta: { title: "抱歉，没有您想要的页面☹ !" }
        // }
    ]
})

router.beforeEach((to, from, next) => {
    // 每个页面显示自己的title
    if (to.meta.title) {
        document.title = to.meta.title
    }

    const userInfo = localStorage.getItem("useUserInfoStore")

    // 获取 token
    const token = localStorage.getItem('token')
    // 如果有 token
    if (token !== null && token !== '' && userInfo !== null && userInfo !== '') {
        // 带有token访问登录页面跳转至主页
        if (to.path === '/login') {
            next('/')
        } else {
            // 带有token访问其他页面允许跳转
            next()
        }
    } else {
        // 没有token
        // 没有token访问登录页面允许
        if (to.path === '/login') {
            next()
        } else {
            // 没有token访问其他页面跳转至登录页面
            ElMessage({
                message: "登录已过期，请重新登录！",
                type: "error",
                showClose: true,
                center: true,
            });
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            })
        }
    }
})
export default router
